<template>
	<view class="nav">
		<!-- 状态栏 -->
		<view :style=" 'height:' + status + 'rpx;' + containerStyle"></view>
		<!-- 内容 -->
		<view class="navbar" :style=" 'height:' + navHeight + 'rpx;' + containerStyle "></view>
	</view>
</template>

<script setup>
	import { onBeforeMount , ref , defineProps} from 'vue'
	const  props = defineProps({
		// 背景色
		background:{
			style:String,
			default:'rgba(255,255,255)'
		},
		// 颜色
		color:{
			type:String,
			default:'rgba(0,0,0,1)'
		},
		// 字体大小
		fontSize:{
			type:String,
			default:32
		},
		// 图标宽度
		iconWidth:{
			type:String,
			default:116
		},
		// 图标高度
		iconHeight:{
			type:String,
			default:38
		}
	})
	onBeforeMount(()=>{
		setNavSize()
	})
	// 状态栏高度
	const status = ref(0)
	// 内容高度
	const navHeight = ref(0)
	// 背景颜色
	const containerStyle = ref('')
	// 字体样式
	const textStyle = ref('')
	// 图标的样式
	const iconStyle = ref('')
	// 计算状态栏高度
	const setNavSize = async ()=>{
		const { statusBarHeight,system } = await uni.getSystemInfoAsync()
		status.value = statusBarHeight * 2
		const isIOS = system.indexOf('IOS') > -1
		if(!isIOS){
			navHeight.value = 96
		}else{
			navHeight.value = 88
		}
	}
	// 样式设置
	const setStyle = ()=>{
		containerStyle.value = ['background:'+ props.background].join(';')
		textStyle.value = ['color:'+props.color,'font-size:'+props.fontSize+'rpx'].join(';')
		iconStyle.value =['width:'+props.iconWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')
	}
</script>

<style>
	.nav{
		position: fixed;
		width:100%;
		top:0px;
		left:0px;
		z-index: 2;
	}
</style>